<template>
  <div>
   <el-input v-if="!ifmobile" placeholder="请输入内容" v-model="article.title" style="width:30%;" id="title">
      <template slot="prepend">标题</template>
    </el-input>
    &nbsp;
    <el-input v-if="!ifmobile" placeholder="请输入内容" v-model="article.editor" style="width:30%;" id="editor">
      <template slot="prepend">昵称</template>
    </el-input>
    <el-input v-if="ifmobile" placeholder="请输入内容" v-model="article.title" style="margin:10px;" id="mtitle">
      <template slot="prepend">标题</template>
    </el-input>
    <el-input v-if="ifmobile" placeholder="请输入内容" v-model="article.editor" style="margin:10px;" id="meditor">
      <template slot="prepend">昵称</template>
    </el-input>
    <el-button type="primary" round style="margin-left:10px;" @click="submit">提交</el-button>
    <el-divider></el-divider><br/>
    <mavon-editor v-model="article.content" style="min-width: 70vw" @change="change" @save="submit"/>
  </div>
</template>

<script>
// @ is an alias to /src
function getTime () {
  const date = new Date()
  const y = date.getFullYear()
  const mo = date.getMonth() + 1
  const d = date.getDate()
  const h = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()
  return y + '-' + (mo < 10 ? '0' + mo : mo) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
}
export default {
  name: 'Home',
  data () {
    return {
      article: {
        content: '',
        title: '',
        lasteditor: '',
        ifchange: false
      },
      ifchange: false,
      lastcontent: '',
      ifmobile: window.ifmobile
    }
  },
  methods: {
    submit: function () {
      if (!this.article.title) {
        this.$notify.error({
          title: '标题为必填项',
          message: '请填写该文章的标题!'
        })
        if (this.ifmobile) document.getElementById('mtitle').focus()
        else document.getElementById('title').focus()
        return
      }
      if (!this.article.editor) {
        this.$notify.error({
          title: '编辑者为必填项',
          message: '请填写您的昵称!'
        })
        if (this.ifmobile) document.getElementById('meditor').focus()
        else document.getElementById('editor').focus()
        return
      }
      const date = getTime()
      this.axios({
        url: 'https://lycm.xyz/api/articles/',
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        data: {
          title: this.article.title,
          content: this.article.content,
          author: this.article.editor,
          editor: this.article.editor,
          update: date,
          pubdate: date
        }
      }).then((res) => {
        this.$notify({
          title: '保存成功,请等待管理员审核',
          type: 'success'
        })
        this.$router.replace('/newed')
      }).catch((err) => {
        this.$notify.error({
          title: '在向服务器上传数据时出现错误',
          message: err
        })
      })
    },
    change: function () {
      if (this.lastcontent === this.article.content) return
      this.ifchange = true
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log(to)
    console.log(from)
    if (to.name === 'Newed' && from.name === 'New') {
      next()
    } else if (this.ifchange && to.name !== 'Article') {
      this.$confirm('将丢失未保存内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        next()
      }).catch(() => {})
    } else {
      next()
    }
  }
}
</script>
<style scoped>
</style>
